<template>
  <el-card style="margin: 24px;" shadow="never">
    <!-- <div slot="header" class="clearfix">
      <span>定义管理</span>
    </div>-->

    <el-dialog :visible.sync="detShow" :close-on-click-modal="false" center>
      <span>
        <el-form :model="formInline">
          <el-form-item label="请假人工号">
            <el-input v-model="formInline.userCode" placeholder="请假人工号" />
          </el-form-item>
          <el-form-item label="请假人姓名">
            <el-input v-model="formInline.name" placeholder="请假人姓名" />
          </el-form-item>
          <el-form-item label="请假天数">
            <el-input v-model="formInline.days" placeholder="请假天数" />
          </el-form-item>
          <el-form-item label="开始日期">
            <!-- <el-input v-model="formInline.startTime" placeholder="开始日期" /> -->
            <el-date-picker
              v-model="formInline.startTime"
              type="date"
              placeholder="开始日期"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="结束日期">
            <!-- <el-input v-model="formInline.endTime" placeholder="结束日期" /> -->
            <el-date-picker
              v-model="formInline.endTime"
              type="date"
              placeholder="开始日期"
              style="width: 100%;"
            />
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detShow = false">取 消</el-button>
        <el-button v-if="formPostBtn" type="primary" :loading="btnLoading" @click="addLeave()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <el-upload action="/" multiple style="display: inline-block;">
      <el-button type="primary" icon="el-icon-upload2">导入模板</el-button>
    </el-upload>
    <el-button type="primary" icon="el-icon-plus" @click="newModel">新建</el-button>-->

    <el-button type="primary" icon="el-icon-plus" @click="leaveHandle()">我要请假</el-button>
    <el-button style="float: right;" icon="el-icon-refresh" @click="getList()" />

    <br>
    <br>

    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showDet(scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="text" @click="formHandle(scope.row)">办理</el-button> -->
        </template>
      </el-table-column>
      <el-table-column label="ID">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.processInstanceId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假人">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假人工号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.creator }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发起时间" width="200">
        <template slot-scope="scope">
          <i v-if="scope.row.startTime != null" class="el-icon-time" />
          <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="200">
        <template slot-scope="scope">
          <i v-if="scope.row.endTime != null" class="el-icon-time" />
          <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 16px;"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { add, fetchList } from '@/api/leave'
import * as fecha from 'element-ui/lib/utils/date'
import { findFormInfo } from '@/api/task'

export default {
  name: 'InstanceLeave',
  data() {
    return {

      currentPage: 1,
      total: 40,
      pageSize: 10,

      tableData: [],

      formInline: {},

      loading: true,

      detShow: false,

      formShow: false,

      formPostBtn: true,

      btnLoading: false

    }
  },

  created() {
    this.getList()
  },
  methods: {

    leaveHandle() {
      this.formInline = {}
      this.detShow = true
      this.formPostBtn = true
    },

    showDet(formData) {
      this.formPostBtn = false
      formData.businessName = 'leave'
      formData.taskId = formData.id
      findFormInfo(formData).then(response => {
        console.log(response)
        if (response.code === '100') {
          const formInline = response.data.formInfo
          this.detShow = true
          this.formInline = formInline
          console.log(formInline)
          formInline.userCode = formInline.creator
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
      })
      // this.formInline = formData
      // this.formShow = true
    },

    addLeave() {
      this.btnLoading = true
      this.formInline.creator = this.formInline.userCode
      add(this.formInline).then(response => {
        if (response.code === '100') {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'success'
          })
          this.detShow = false
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
        this.btnLoading = false
        this.getList()
      }).catch(() => {
        this.btnLoading = false
      })
    },

    datetimeFormatter(val) {
      if (val == null) {
        return val
      }
      const dt = fecha.format(new Date(val), 'yyyy-MM-dd HH:mm:ss')
      return dt
    },

    handleSizeChange() {
      console.log('handleSizeChange')
    },

    handleCurrentChange(val) {
      const query = {
        pageNum: val,
        pageSize: this.pageSize
      }
      this.getList(query)
    },

    newModel() {
      this.$router.push('/engine/model-new')
    },

    getList(query) {
      this.loading = true

      if (typeof query === 'undefined') {
        query = {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }

      if (this.formInline.userCode === '') {
        this.formInline.userCode = null
      }

      if (this.formInline.formName === '') {
        this.formInline.formName = null
      }

      // Object.assign(query, this.formInline)

      fetchList(query).then(response => {
        this.tableData = response.data
        this.total = response.total
        this.loading = false
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
